<template>
  <div style="height:100%;width:100%;position:relative;">
    <div class="pagetop">
      <div style="position:absolute;right:0;top:3px">
        <table>
          <tr>
            <td>
              <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
            </td>
            <td>
              <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
            </td>
            <td>
              <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
            </td>
            <td>
              <el-button @click="RecordExport" icon="el-icon-upload2" v-has="'PEXPORT'">导出</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center" style="height:100%;">
        <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName"
          @current-change="currentChangeEvent" border fit :mouse-config="{ selected: true }"
          :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" @edit-actived="CellActive"
          :keyboard-config="keyConfig" height="auto" header-align="center" @edit-closed="EditChange" highlight-current-row
          highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini"
          stripe>
          <vxe-table-column type="index" title="NO." width="60"></vxe-table-column>
          <vxe-table-column field="mccode" title="分类代码" width="80" sortable
            :edit-render="{ name: 'input', autoselect: true }"></vxe-table-column>
          <vxe-table-column field="mcname" title="分类名称" width="180" :edit-render="{ name: 'input', autoselect: true }"
            sortable>
          </vxe-table-column>
          <vxe-table-column field="subflag" title="子类" width="100" sortable align="center"
            :edit-render="{ name: 'select', options: yesnoOption }">
          </vxe-table-column>
          <vxe-table-column field="parentclass" title="所属大类" width="180" sortable align="center"
            :edit-render="{ name: 'select', props: { clearable: true }, options: marrowgroupOption }">
          </vxe-table-column>
          <vxe-table-column field="showallflag" title="合计" width="100" sortable align="center"
            :edit-render="{ name: 'select', options: yesnoOption }">
          </vxe-table-column>
          <!-- <vxe-table-column field="sortindex" title="顺序号" width="100" sortable :edit-render="{name:'input',autoselect: true}"></vxe-table-column> -->
        </vxe-table>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span><span class="el-icon-info">确定删除分类名称为<b style="color:red">{{ message }}</b>的记录吗？</span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="SubmitDel">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "LIS11A",
  data() {
    return {
      tableData: [],
      message: "",
      selectrow: [],
      marrowgroupOption: [],
      yesnoOption: [
        { label: '', value: '' },
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      curselectrow: "",
      actionindex: 0,
      tempindex: 0,
      dialogVisible: false,
      okFirstLoading: true,
      keyConfig: {
        isArrow: true,
        isDel: true,
        isTab: true,
        isEdit: true
      }
    };
  },
  created() {
    this.InitPageDate(); //初始化主列表
    this.ddlInitialList();
  },
  mounted() { },
  updated() {
    if (this.okFirstLoading) {
      let currentrow = "";
      if (this.actionindex != 0) {
        //新增，修改，删除
        if (this.actionindex == 3) {
          //如果是删除
          if (this.tempindex > 0) {
            currentrow = this.$refs.xTable.getData(this.tempindex);
          } else {
            currentrow = this.$refs.xTable.getData(0);
          }
        } else {
          //新增或修改
          if (this.curselectrow && this.curselectrow.mccode != "") {
            //this.curselectrow
            this.$nextTick(() => {
              let row = this.curselectrow;
              var alld = this.$refs.xTable.tableData;
              for (var i = 0; i < alld.length; i++) {
                if (alld[i].mccode == row.mccode) {
                  this.tempindex = i;
                  break;
                }
              }
              currentrow = this.$refs.xTable.getData(this.tempindex);
            });
          } else {
            currentrow = this.$refs.xTable.getData(0);
          }
        }
      } else {
        //查询
        currentrow = this.$refs.xTable.getData(0);
        this.actionindex = 2;
        this.curselectrow = currentrow;
      }
      this.$nextTick(() => {
        if (currentrow) {
          this.okFirstLoading = false;
          this.$refs.xTable.setCurrentRow(currentrow);
          this.message = currentrow.mcname;
        }
      });
    }
  },
  methods: {
    InitPageDate() {
      this.loading = true;
      this.$tool
        .request({
          url: "LIS/LIS1/LIS11A",
          method: "post",
          data: {
            action: "query"
          }
        })
        .then(res => {
          this.tableData = res.Data;

          this.loading = false;
          this.okFirstLoading = true;
        })
        .catch(e => {
          console.log("error", e);
        });
    },
    rowClassName({ row, rowIndex }) {
      let isDirty = this.$refs.xTable.hasRowChange(row);
      if (isDirty) {
        return "row-modify";
      }
      if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
    },
    currentChangeEvent({ row, $rowIndex }) {
      this.message = row.mcname;
      this.actionindex = 2; //修改
      this.tempindex = $rowIndex;
      this.curselectrow = row;
    },
    ddlInitialList() {
      this.$tool
        .request({
          url: "LIS/LIS1/LIS11A",
          method: "post",
          data: {
            action: "ddlInitialList"
          }
        })
        .then(response => {
          this.marrowgroupOption = response;
        });
    },
    btnAdd() {
      let initdata = {
        mccode: "",
        mcname: "",
        subflag: "",
        parentclass: "",
        showallflag: "",
        sortindex: ""
      };
      this.$refs.xTable.insert(initdata);
      this.actionindex = 1; //增加
      this.FunscrollY();
      let rows = this.$refs.xTable.tableData;
      let selectrow = this.$refs.xTable.tableData[rows.length - 1];
      if (selectrow && selectrow != "") {
        this.$refs.xTable.setCurrentRow(selectrow);
        this.$refs.xTable.setActiveRow(selectrow, "mccode");
      }
    },
    FunscrollY() {
      this.$nextTick(() => {
        var alldataLen = this.$refs.xTable.tableData.length;
        let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
        this.$refs.xTable.scrollToRow(L);
      });
    },
    btnDelete() {
      this.dialogVisible = true;
    },
    SubmitDel() {
      let delrow = this.$refs.xTable.getCurrentRow();
      if (delrow) {
        var alld = this.$refs.xTable.tableData;
        var rowindex = alld.indexOf(delrow);
        this.$refs.xTable.remove(delrow);
        this.actionindex = 3; //删除
        let havedata = this.$refs.xTable.tableData;
        if (havedata.length > 0) {
          if (rowindex >= havedata.length) rowindex = havedata.length - 1;
          this.tempindex = rowindex;
          let selectrow = havedata[rowindex];
          this.$refs.xTable.setCurrentRow(selectrow);
          this.message = selectrow.mcname;
        }
      } else {
        this.$message({
          message: "请选择要删除的记录！",
          type: "warning"
        });
      }
      this.dialogVisible = false;
    },
    EditChange({ row, columnIndex, rowIndex }) {
    },
    SaveRecord() {
      let tabledata = this.$refs.xTable.getRecordset();
      if (tabledata.insertRecords.length > 0) {
        this.curselectrow = tabledata.insertRecords[0];
      }
      let insertresult = [];
      let insertobj = tabledata.insertRecords;
      for (var i = 0; i < insertobj.length; i++) {
        var obj = insertobj[i];
        if (!!obj["mccode"]) {
          insertresult.push(obj);
        }
      }
      tabledata.insertRecords = insertresult;
      this.$tool
        .request({
          url: "LIS/LIS1/LIS11A",
          method: "post",
          data: {
            action: "save",
            urec: tabledata
          }
        })
        .then(response => {
          if (response.errcode == "1") {
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.InitPageDate();
          } else {
            this.$message({
              message: "保存失败！" + response.errmsg,
              type: "warning"
            });
          }
        });
    },
    RecordExport() {
      this.$refs.xTable.exportCsv({ filename: "LIS11A 骨髓细胞分类" });
    },
    CellActive({ row, columnIndex, column }) {
      if (row.mccode == null) {
        row.mccode = "";
        row.mcname = "";
        row.subflag = "";
        row.parentclass = "";
        row.showallflag = "";
        row.sortindex = "";
      }
      this.message = row.mcname;
      this.$refs.xTable.setCurrentRow(row);
      this.actionindex = 2; //修改
      this.tempindex = this.$refs.xTable.getRowIndex(row);
    }
  }
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

/deep/.middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}

/deep/ .vxe-table .vxe-body--column.col-orange {
  background-color: #ccc;
}

/deep/ tr.vxe-body--row.row-modify {
  color: blue !important;
}

/deep/ tr.vxe-body--row.row-new {
  color: red !important;
}</style>